<template>
    <view class="container" v-if="isShow">
        <!-- 创建金币对象 -->
        <!-- 大金币 -->
        <view :class="coinShow ? 'coinShow bgCoin' : 'bgCoin'" :animation="bgCoinAnimation"></view>
        <!-- 7个小金币 -->
        <view :class="coinShow ? 'coinShow coin coin1' : ' coin coin1'" :animation="coinAnimation1">1</view>
        <view :class="coinShow ? 'coinShow coin coin2' : ' coin coin2'" :animation="coinAnimation2">2</view>
        <view :class="coinShow ? 'coinShow coin coin3' : ' coin coin3'" :animation="coinAnimation3">3</view>
        <view :class="coinShow ? 'coinShow coin coin4' : ' coin coin4'" :animation="coinAnimation4">4</view>
        <view :class="coinShow ? 'coinShow coin coin5' : ' coin coin5'" :animation="coinAnimation5">5</view>
        <view :class="coinShow ? 'coinShow coin coin6' : ' coin coin6'" :animation="coinAnimation6">6</view>
        <view :class="coinShow ? 'coinShow coin coin7' : ' coin coin7'" :animation="coinAnimation7">7</view>
    </view>
</template>

<script>
// components/Animation/gold.js
export default {
    data() {
        return {
            isShow: false,
            coinShow: false,
            bgCoinAnimation: '',
            coinAnimation1: '',
            coinAnimation2: '',
            coinAnimation3: '',
            coinAnimation4: '',
            coinAnimation5: '',
            coinAnimation6: '',
            coinAnimation7: ''
        };
    },
    /**
     * 组件的属性列表
     */
    props: {},
    /**
     * 组件的方法列表
     */
    methods: {
        animation() {
            this.coinShow = false;
            this.isShow = true;
            this.bgAnimation();
            this.smallAnimation();
        },

        //大金币动画
        bgAnimation() {
            var animation = uni.createAnimation({
                duration: 1000,
                timingFunction: 'ease-in-out'
            });
            this.timer = setTimeout(() => {
                animation
                    .translate3d(0, 30, 0)
                    .step()
                    .translate3d(0, 0, 0)
                    .step()
                    .rotate(80)
                    .step({
                        duration: 400
                    })
                    .rotate(0)
                    .step({
                        duration: 500
                    });
                this.bgCoinAnimation = animation.export();
            }, 100);
            setTimeout(() => {
                animation.opacity(0).scale(4).step();
                this.bgCoinAnimation = animation.export();
            }, 3000);
        },

        //小金币动画
        smallAnimation() {
            var animation = uni.createAnimation({
                duration: 1000,
                timingFunction: 'ease-in-out'
            });
            animation.translate3d(0, 30, 0).step().translate3d(0, 0, 0).step();
            setTimeout(() => {
                this.coinAnimation1 = animation;
            }, 300);
            setTimeout(() => {
                this.coinAnimation2 = animation;
            }, 500);
            setTimeout(() => {
                this.coinAnimation3 = animation;
            }, 600);
            setTimeout(() => {
                this.coinAnimation4 = animation;
            }, 700);
            setTimeout(() => {
                this.coinAnimation5 = animation;
            }, 800);
            setTimeout(() => {
                this.coinAnimation6 = animation;
            }, 900);
            setTimeout(() => {
                this.coinAnimation7 = animation.export();
            }, 1000); //小金币掉落动画

            setTimeout(() => {
                animation.translate3d(0, 1000, 0).step();
                this.coinAnimation1 = animation;
                this.coinAnimation2 = animation;
                this.coinAnimation3 = animation;
                this.coinAnimation4 = animation;
                this.coinAnimation5 = animation;
                this.coinAnimation6 = animation;
                this.coinAnimation7 = animation;
            }, 3000); //动画结束，重置动画初始位置

            setTimeout(() => {
                this.coinShow = true;
                var animation = uni.createAnimation({
                    duration: 300,
                    timingFunction: 'ease-in-out'
                });
                var animation2 = uni.createAnimation({
                    duration: 300,
                    timingFunction: 'ease-in-out'
                });
                animation.translate3d(0, -1000, 0).step();
                animation2.translate3d(0, -1000, 0).step().scale(1).step();
                this.bgCoinAnimation = animation2.export();
                this.coinAnimation1 = animation;
                this.coinAnimation2 = animation;
                this.coinAnimation3 = animation;
                this.coinAnimation4 = animation;
                this.coinAnimation5 = animation;
                this.coinAnimation6 = animation;
                this.coinAnimation7 = animation;
                setTimeout(() => {
                    this.isShow = false;
                }, 500);
            }, 4000);
        }
    }
};
</script>
<style>
@import './gold.css';
</style>
